<template>
  <div class="swiple-item"
    :class="{
      'swiple-item-white': addWhite,
      'swiple-item-card': addCard,
      'dotPosition':vertical? true : false
    }"
    :style="{ 'flex-direction': vertical === 'right' ? 'column' : 'row' }"
  >
  <slot/>
  </div>
</template>
<script>
  export default{
    name: 'swipleItem',
    data(){
      return {
        addWhite: false,
        addCard: false
      }
    },
    props: {
      vertical: {
        type: String,
        default: "right",
      },
    },
  }
</script>
<style lang="less" scoped>
.swiple-item{
  min-width: 100%;
  display: flex;
  flex-wrap: wrap;
}
.swiple-item-white{
  padding: 16px 16px 22px 16px;
}
.swiple-item-card {
  margin: 0 4px;
  min-width: calc(100% - 44px);
}
.dotPosition{

}
</style>